<script setup lang="ts">
import { EnumOpType, EnumViewType } from "@renderer/assets/types";
import { inject } from "vue";
import { idHelper } from "@renderer/store/pinia/helper";
import { useUserOpStore } from "@renderer/store/pinia/userOp";
import GroupBtnWithDropdown from "@renderer/view/components/components/GroupBtnWithDropdown.vue";
import { useTabManagerStore } from "@renderer/store/pinia/tabManager";
import { useViewManagerStore } from "@renderer/store/pinia/viewManager";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const {
  activeViewRef: activeView
} = getActiveTabViewOp()
const items = [
  {
    title: "stack",
    value: EnumViewType.stack,
  },
  {
    title: "axial",
    value: EnumViewType.ax,
  },
  {
    title: "sag",
    value: EnumViewType.sag,
  },
  {
    title: "cor",
    value: EnumViewType.cor,
  },
];

const selectViewType = (viewType: EnumViewType) => {
  if (viewType === activeView.value.viewType) {
    return;
  }
  const seriesId = activeView.value.seriesId;
  const viewMode = activeView.value.viewMode;
  const targetViewId = idHelper.createViewId({ seriesId, viewMode, viewType });
  const tabStore = useTabManagerStore();
  const viewStore = useViewManagerStore();

  if (
    [EnumViewType.ax, EnumViewType.sag, EnumViewType.cor].includes(viewType)
  ) {
    const subViewIds = [
      EnumViewType.ax,
      EnumViewType.sag,
      EnumViewType.cor,
    ].map((viewType: string) => {
      return idHelper.createViewId({ seriesId, viewMode, viewType });
    });
    viewStore.toggleWaitingView({
      tabId: activeView.value.tabId,
      viewId: targetViewId,
    });
    //  创建顶部操作栏
    createNewViewOpObj(subViewIds);
    // 更新view的active状态。
    updateActiveViewByTarget(targetViewId, viewType);
    // 加载
    tabStore.startLoadSeries({
      groupId: activeView.value.tabId,
      subViewIds,
      seriesId: activeView.value.seriesId,
    });
  }
  viewStore.toggleWaitingView({
    tabId: activeView.value.tabId,
    viewId: targetViewId,
  });
  //  创建顶部操作栏
  createNewViewOpObj([targetViewId]);
  // 更新view的active状态。
  updateActiveViewByTarget(targetViewId, viewType);
  // 加载
  tabStore.startLoadSeries({
    groupId: activeView.value.tabId,
    subViewIds: [targetViewId],
    seriesId: activeView.value.seriesId,
  });
};

const updateActiveViewByTarget = (targetViewId, targetViewType) => {
  activeView.value.viewId = targetViewId;
  activeView.value.viewType = targetViewType;
};

const createNewViewOpObj = (subViewIds) => {
  const userOpStore = useUserOpStore();
  subViewIds.forEach((viewId: string) => {
    userOpStore.createNewViewOpObj(viewId);
  });
};
</script>

<template>
  <group-btn-with-dropdown
    tips="viewSelect"
    :op-type="{
      type: EnumOpType.viewSelect,
      subType: '',
    }"
    :svg-btn="true"
    icon="mprIcon"
  >
    <template #dropdownSlot>
      <v-list>
        <v-list-item
          v-for="(item, index) in items"
          @click="selectViewType(item.value)"
          :active="activeView.viewType === item.value"
          :key="index"
          :value="index"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </template>
  </group-btn-with-dropdown>
</template>

<style scoped></style>
